<template>
  <CollapsibleSection
    title="诊断结果及其依据"
    :is-expanded="isExpanded"
    @toggle="$emit('toggle')"
  >
    <view class="space-y-[16rpx]">
      <!-- 疾病名称选择器 -->
      <view class="flex items-center">
        <text class="text-[24rpx] text-gray-700 w-[150rpx]">　服务项目:</text>
        <view class="flex-1">
          <PickerInput
            :modelValue="formData.diseaseName"
            @update:modelValue="(value) => updateField('diseaseName', value)"
            :columns="[]"
            dictCode="nurse_type"
            placeholder="请选择疾病（开发中）"
            title="请选择疾病（开发中）"
          />
        </view>
      </view>
      
      <!-- 诊断项目列表 -->
      <view v-for="(item, index) in formData.diagnosisItems" :key="index" class="border border-gray-200 rounded-[12rpx] p-[16rpx] mb-[16rpx]">
        <view class="flex items-center justify-between mb-[12rpx]">
          <text class="text-[24rpx] font-medium text-gray-700">诊断项目 {{ index + 1 }}</text>
          <nut-button 
            v-if="formData.diagnosisItems.length > 1"
            type="danger" 
            size="small" 
            @click="removeDiagnosisItem(index)"
          >
            删除
          </nut-button>
        </view>

        <!-- 职业选择 -->
        <view class="flex items-center mb-[12rpx]">
          <text class="text-[24rpx] text-gray-700 w-[150rpx]">职业:</text>
          <view class="flex-1">
            <PickerInput
              :modelValue="item.occupation"
              @update:modelValue="(value) => updateDiagnosisItem(index, 'occupation', value)"
              :columns="[]"
              dictCode="job"
              placeholder="请选择职业"
              title="请选择职业"
            />
          </view>
        </view>
        
        <!-- 疾病名称 -->
        <view class="flex items-center mb-[12rpx]">
          <text class="text-[24rpx] text-gray-700 w-[150rpx]">疾病名称:</text>
          <nut-input 
            :model-value="item.diseaseName" 
            @update:model-value="updateDiagnosisItem(index, 'diseaseName', $event)" 
            placeholder="请输入疾病名称" 
            class="flex-1" 
          />
        </view>
        
        <!-- 诊断结果 -->
        <ItemWithImagesCard
          :model-value="{ title: '', description: item.diagnosisResult || '', images: item.diagnosisResultImages || [] }"
          @update:model-value="(data) => { 
            updateDiagnosisItem(index, 'diagnosisResult', data.description); 
            if (data.images?.length) updateDiagnosisItem(index, 'diagnosisResultImages', data.images); 
          }"
          :show-title="false"
          description-label="诊断结果"
          description-placeholder="请输入诊断结果"
          :description-rows="2"
          border-color="border-green-300"
        />
        
        <!-- 诊断依据 -->
        <ItemWithImagesCard
          :model-value="{ title: '', description: item.diagnosisBasis || '', images: item.diagnosisBasisImages || [] }"
          @update:model-value="(data) => { 
            updateDiagnosisItem(index, 'diagnosisBasis', data.description); 
            if (data.images?.length) updateDiagnosisItem(index, 'diagnosisBasisImages', data.images); 
          }"
          :show-title="false"
          description-label="诊断依据"
          description-placeholder="请输入诊断依据"
          :description-rows="2"
          border-color="border-teal-300"
        />
      </view>
      
      <!-- 添加新项目按钮 -->
      <view class="flex justify-center mt-[16rpx]">
        <nut-button type="primary" @click="addDiagnosisItem" class="px-[32rpx]">
          添加新项目
        </nut-button>
      </view>
    </view>
  </CollapsibleSection>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useItemManagement } from '@/composables/useItemManagement'
import CollapsibleSection from '@/components/CollapsibleSection.vue'
import ItemWithImagesCard from '@/components/ItemWithImagesCard.vue'
import PickerInput from '@/components/PickerInput.vue'

interface Props {
  isExpanded: boolean
}

interface Emits {
  (e: 'toggle'): void
}

defineProps<Props>()
defineEmits<Emits>()

const { formData, updateField, updateDiagnosisItem, addDiagnosisItem, removeDiagnosisItem } = useItemManagement()

// 设置默认值
onMounted(() => {
  // 设置服务项目默认值为 2
  if (!formData.value.diseaseName) {
    updateField('diseaseName', 2)
  }
  
  // 为现有诊断项目设置默认职业为 2（专业技术人员/护士职业）
  if (formData.value.diagnosisItems && formData.value.diagnosisItems.length > 0) {
    formData.value.diagnosisItems.forEach((item, index) => {
      if (!item.occupation) {
        updateDiagnosisItem(index, 'occupation', 2)
      }
    })
  }
})
</script>

<style scoped lang="scss">
// 样式已在模板中定义
</style>
